<template>
  <div>
    <VueFlow :nodes="nodes">
      <Panel>
        <button type="button" @click="addNode">Add a node</button>
      </Panel>
    </VueFlow>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { Node } from '@vue-flow/core'
import { VueFlow, Panel } from '@vue-flow/core'

const nodes = ref<Node[]>([
  {
    id: '1',
    data: { label: 'Node 1' }, // you can pass any dat
    position: { x: 0, y: 0 },
  },
  {
    id: '2',
    data: { label: 'Node 2' },
    position: { x: 100, y: 100 },
  },
])

function addNode() {
  const id = Date.now().toString()

  nodes.value.push({
    id,
    position: { x: 150, y: 50 },
    data: { label: `Node ${id}` },
  })
}

const feature = ref()
</script>
